<template>
    <div class="smartWeather-main">
        <div class="smartWeather-content">
            <div class="left">
                <img src="../../../assets/images/weather/day.jpg" alt="">
            </div>
            <div class="right">
                <div class="right-content" v-for="(item, index) in aiData" :key="index">
                    {{ item }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const aiData = ref([
    "11-02 10:26  AI智能识别为能见度≤1km，请注意防范。",
    "11-01 03:26  AI智能识别为能见度≤1km，请注意防范。"
])

</script>
<style lang="scss" scoped>
.smartWeather-main {
    width: 742px;
    height: 460px;
    background: url("@/assets/images/weather/AI智能识天.png");
    .smartWeather-content {
        padding-top: 75px;
        margin-left: 30px;
        display: flex;
        .left {
            width: 349px;
            height: 349px;
            background: url("@/assets/images/weather/图片框.png");
            img {
                width: 100%;
                height: 100%;
            }
        }
        .right {
            width: 331px;
            height: 349px;
            margin-left: 20px;
            .right-content {
                color: #fff;
                margin-bottom: 20px;
            }
        }
    }
}
</style>